{include file="index/header" /}
<div class="container xs-top-15" style="max-width:960px">
    <div class="card">
        <div class="columns">
            <!--区域1-->
            <div class="column">
                <div class="tabs is-centered" style="margin-bottom:0px;">
                    <ul>
                        <li class="is-active">
                            <a href="{:url('index/index/login')}">
                                <span class="icon">
                                    <i class="fa fa-user-circle"></i>
                                </span>
                                用户登陆
                            </a>
                        </li>
                        <li class="">
                            <a href="{:url('index/index/reg')}">
                                <span class="icon">
                                    <i class="fa fa-registered"></i>
                                </span>
                                注册账号
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="columns is-mobile">
            <div class="column is-half is-offset-one-quarter">
                <div class="field is-horizontal" style="margin-right:20px;">
                    <div class="field-label is-normal">
                        <label class="label">账&nbsp;号:</label>
                    </div>
                    <div class="field-body">
                        <div class="field">
                            <p class="control is-expanded has-icons-left">
                                <input class="input" name="username" type="text" placeholder="输入您的账号">
                                <span class="icon is-small is-left">
                                    <i class="fas fa-user"></i>
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="field is-horizontal" style="margin-right:20px;">
                    <div class="field-label is-normal">
                        <label class="label">密&nbsp;码:</label>
                    </div>
                    <div class="field-body">
                        <div class="field">
                            <p class="control is-expanded has-icons-left">
                                <input class="input" name="password" type="password" placeholder="输入您的密码">
                                <span class="icon is-small is-left">
                                    <i class="fas fa-lock"></i>
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="field is-horizontal" style="margin-right:20px;">
                    <div class="field-label is-normal">
                        <label class="label">验证码:</label>
                    </div>
                    <div class="field-body">
                        <div class="field">
                            <p class="control is-expanded has-icons-left">
                                <input class="input" name="verify" type="text" placeholder="输入右侧验证码">
                                <span class="icon is-small is-left">
                                    <i class="fas fa-ban"></i>
                                </span>
                            </p>
                        </div>
                        <div class="field">
                            <img id="verify" src="{:url('api/checkcode/getVerify')}" alt=""
                                style="height: 40px;width: 140px;">
                        </div>
                    </div>
                </div>
                <div class="field is-horizontal">
                    <div class="field-label">
                        <!-- Left empty for spacing -->
                    </div>
                    <div class="field-body">
                        <div class="field">
                            <div class="control">
                                <button class="button is-link" onclick="login()">
                                    确认登陆
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<!--            <div class="column is-one-third">-->
<!--                <img src="/static/img/488x344-1.jpg" alt="" style="height: 200px;">-->
<!--            </div>-->
        </div>

    </div>
</div>
<script>
    function login() {
        data = {
            username: $("[name='username']").val(),
            password: $("[name='password']").val(),
            verify: $("[name='verify']").val()
        };
        $.post("{:url('index/index/login')}", data, function (data, status) {
            if (data.code == 0) {
                //进行跳转
                window.location = "{:url('index/user/main')}"
            } else {
                $("#verify").click();
                layer.alert(data.msg,{skin: 'layui-layer-lan'});
            }
        });
    }
    $("#verify").click(function () {
        var verifyimg = $("#verify").attr("src");
        $("#verify").attr("src", verifyimg.replace(/\?.*$/, '') + '?' + Math.random());
    });
</script>
{include file="index/footer" /}